<template>
  <div id="">
    <div class="headerFix">
      <router-link to="account">
        <img :src="loginUserIcon!=null?loginUserIcon:require('../../images/cr-012.png')">
      </router-link>
    </div>
    <div class="banner">
      <swiper class="banner" :options="bannerOption">
        <swiper-slide v-for="item in items">
          <a :href="item.url">
            <img class="img2" v-bind:src="item.icon"/>
          </a>
        </swiper-slide>
        <div class="swiper-pagination paging" slot="pagination"></div>
      </swiper>
    </div>
    <div class="activity-btn">
      <a v-for="todo in todos" :href="todo.url">
        <img v-bind:src="todo.icon"/>
        <p>{{todo.cname}}</p>
      </a>
    </div>


    <div>
      <!--列表部分  话题2-->
      <div class="comment" v-for="listData in listDatas" v-if="listData.type==2?true:false">
        <router-link :to="'/comment/' + listData.themeId" :key="listData.themeId" class="con-img-a">
          <div class="con">
            <!--头像-->
            <div class="con-top">
              <router-link :to="'/comment/' + listData.themeId" :key="listData.themeId">
                <a class="con-top-a1">
                  <!--默认头像的给予-->
                  <img v-bind:src="(listData.userIcon!=null && listData.userIcon!='')?listData.userIcon:require('../../images/cr-033.png')"/>
                </a>
              </router-link>
              <div class="con-top-p">
                <p class="con-top-p1">{{listData.nickName}}</p>
                <p class="con-top-p2">{{countTime(listData.showTime)}}</p>
              </div>
            </div>
            <!--评论-->
            <div class="con-tit">
              <router-link :to="'/comment/' + listData.themeId" :key="listData.themeId">
                                    <span class="con-tit-span1"
                                          v-if="listData.content!=null">{{listData.content}}</span><span
                v-if="listData.content!=null && listData.content.length>80">...</span>
                <span class="con-tit-span2"
                      v-if="listData.content!=null && listData.content.length>80">阅读全文</span>
              </router-link>
            </div>
            <!--嗮图-->
            <div class="con-img">
              <div class="con-img-2">

                <a v-if="key<3" class="con-img-a con-show-img"
                   v-for="(value,key) in listData.imgList">
                  <img v-bind:src="value.smallImg"/>
                </a>
                <span class="con-img-num"
                      v-if="listData.imgList!=null && listData.imgList.length>3">共{{listData.imgList.length}}张</span>
              </div>
            </div>
          </div>
        </router-link>
        <!--留言，赞，打赏-->
        <div class="con-talk">
                        <span>
                             <router-link :to="'/comment/' + listData.themeId" :key="listData.themeId"
                                          class="con-img-a">
                               <img src="../../images/cr-004.png"/><i>{{listData.commentCount}}</i>
                             </router-link>
                        </span>
          <!-- <span @click="likeData(listData.likeCount,listData.themeId,1)" v-if="listData.behaviors==null"><img src="../../images/cr-005.png"/><i>{{listData.likeCount}}</i></span>

          <span v-else-if="listData.behaviors!=null">
            <span  @click="likeData(listData.likeCount,listData.themeId,1)" v-if="listData.behaviors[0].behaviorType=='LIKE' && listData.behaviors[0].behaviorValue!='1'"><img src="../../images/cr-005.png"/><i>{{listData.likeCount}}</i></span>
            <span   @click="likeData(listData.likeCount,listData.themeId,2)" v-if="listData.behaviors[0].behaviorType=='LIKE' && listData.behaviors[0].behaviorValue=='1'"><img src="../../images/cr-028.png"/><i>{{listData.likeCount}}</i></span>
          </span> -->
          <span @click="likeData(listData.likeCount,listData.themeId,isLikeNum)"
                v-if="listData.behaviors==null"><img
            src="../../images/cr-005.png"/><i>{{listData.likeCount}}</i></span>
          <!--<span v-else-if="listData.behaviors!=null">-->
          <span @click="likeData(listData.likeCount,listData.themeId,isLike.behaviorValue)"
                v-for="isLike in listData.behaviors"
                v-if="isLike.behaviorType=='LIKE' && isLike.behaviorValue=='1' && listData.behaviors!=null"><img
            src="../../images/cr-028.png"/><i>{{listData.likeCount}}</i></span>
          <span @click="likeData(listData.likeCount,listData.themeId,isLike.behaviorValue)"
                v-for="isLike in listData.behaviors"
                v-if="isLike.behaviorType=='LIKE' && isLike.behaviorValue!='1' && listData.behaviors!=null"><img
            src="../../images/cr-005.png"/><i>{{listData.likeCount}}</i></span>
          <span @click="likeData(listData.likeCount,listData.themeId,isLikeNum)"
                v-if="isHaveLike(listData.behaviors) && listData.behaviors!=null"><img
            src="../../images/cr-005.png"/><i>{{listData.likeCount}}</i></span>
          <!-- <span @click="likeData(listData.likeCount,listData.themeId,1)" v-for="isLike in listData.behaviors" v-if="isLike.behaviorType!='LIKE'"><img src="../../images/cr-005.png"/><i>{{listData.likeCount}}</i></span> -->
          <!--</span>-->

          <span class="con-talk-btn" @click="listDataFun(listData.themeId,listData.rewardCount)">
                      <img v-if="isHaveReward(listData.behaviors) && listData.behaviors!=null"
                           src="../../images/cr-006.png"/><i
            v-if="isHaveReward(listData.behaviors) && listData.behaviors!=null">{{listData.rewardCount}}</i>
                        <img v-if="HaveReward(listData.behaviors) && listData.behaviors!=null"
                             src="../../images/cr-005.png"/><i
            v-if="HaveReward(listData.behaviors) && listData.behaviors!=null">{{listData.rewardCount}}</i>
                      <img v-if="listData.behaviors==null" src="../../images/cr-006.png"/><i
            v-if="listData.behaviors==null">{{listData.rewardCount}}</i>
                    </span>
        </div>
        <!--留言评论-->
        <!--div class="message-talk" v-for="talkData in listData.comments">

          &lt;!&ndash; <div class="message-talk-tit">{{talkData.content}}</div> &ndash;&gt;
          &lt;!&ndash;是否回复评论  1为是&ndash;&gt;
          <div class="message-reply" v-if="talkData.isReComment==0">
            <div class="message-talk-top">
              <div class="message-top-header"><img v-bind:src="talkData.userIcon"/></div>
              <div class="message-top-name">
                <p class="message-top-name-p1">{{talkData.nickName}}</p>
                <p class="message-top-name-p2">{{talkData.lastTime}}</p>
              </div>
              <div class="message-top-shop">
                &lt;!&ndash; <a><img src="./common/images/cr-007.png"/><span>{{talkData.commentCount}}</span></a> &ndash;&gt;
                <a><img src="../../images/cr-008.png"/><span>{{talkData.likeCount}}</span></a>
                &lt;!&ndash; <a><img src="./common/images/cr-009.png"/><span>{{talkData.reportCount}}</span></a> &ndash;&gt;
              </div>
              <div class="message-talk-tit">
                <router-link   :to="'/comment/' + listData.themeId" :key="listData.themeId" class="con-img-a">
                {{talkData.content}}
                </router-link>
              </div>
            </div>
          </div>

          <div class="message-reply" v-if="talkData.isReComment==1">
            <div class="message-talk-top">
              <div class="message-top-header"><img v-bind:src="talkData.userIcon"/></div>
              <div class="message-top-name">
                <p class="message-top-name-p1">{{talkData.nickName}}</p>
                <p class="message-top-name-p2">{{talkData.lastTime}}</p>
              </div>
              <div class="message-top-shop">
                &lt;!&ndash; <a><img src="./common/images/cr-007.png"/><span>{{talkData.commentCount}}</span></a> &ndash;&gt;
                <a><img src="../../images/cr-008.png"/><span>{{talkData.likeCount}}</span></a>
                &lt;!&ndash; <a><img src="./common/images/cr-009.png"/><span>{{talkData.reportCount}}</span></a> &ndash;&gt;
              </div>
              <div class="message-talk-tit">回复了<span>{{talkData.pNickName}}</span>:
                <router-link   :to="'/comment/' + talkData.themeId" :key="talkData.themeId" class="con-img-a">
                  {{talkData.content}}
                </router-link>
              </div>
            </div>
          </div>
        </div>-->
      </div>
      <!--列表部分  广告3-->
      <div class="comment" v-for="listData in listDatas" v-if="listData.type==3?true:false">
        <a :href="listData.url">
          <img class="img2" v-bind:src="listData.img"/>
        </a>
      </div>
      <!--列表部分  刮刮乐4-->
      <!-- <div class="comment" >
        <div class="award">
          <canvas id="canvas" width="320" height="140" style="background:#f2f2f2;"></canvas>
          点击抽奖的遮罩层
          <div id="blowCardDsec" class="blowCardDsec" v-show="isCanvasShow">
            <img class="blowCardDsec-img" src="../../images/cr-032.png"/>
            <div class="blowCardBtnDiv">
              <p class="descFonts">恭喜你，获得一次刮1G流量的机会</p>
              <button class="blowCardBtn" v-on:click="toggle()">点我刮奖</button>
            </div>
          </div>
        </div>
      </div> -->
    </div>


    <!--打赏弹窗-->
    <div class="award-pop" @click="awardNone2" @touchmove.prevent v-show="isshow"></div>
    <div class="award-tc" v-show="isshow">
      <div class="award-1"><img src="../../images/cr-014.png"/></div>
      <div class="award-2" @click="popNone"><img src="../../images/cr-015.png"/></div>
      <div class="award-3"><b>给他打赏</b></div>
      <div class="award-4">每打赏一个果币将得到一次获得奖池所有果币的机会，打赏越多，机会越大哦</div>
      <div class="award-5">
        <div class="award-minus" @click="awardMinus"><img src="../../images/cr-016.png"/></div>
        <div class="award-money">{{listNumber}}个果币</div>
        <div class="award-plus" @click="awardPlus"><img src="../../images/cr-017.png"/></div>
      </div>
      <div class="award-6" @click="awardGo()">立刻打赏</div>
      <div style="line-height: 1;color: red;text-align: center;margin-bottom: 0.5rem;" v-if="rewardMsg !=''">
        {{rewardMsg}}
      </div>
      <div class="award-7">中奖后可在<span>"我的"-"果币"</span>中查看</div>
    </div>


  </div>
</template>

<script>
  import {swiper, swiperSlide} from 'vue-awesome-swiper'
  import {getStore, setStore} from 'src/config/mUtils'

  import Loadmore from 'mint-ui';

  import {
    getBanner,
    getActivity,
    userInfo,
    themeList,
    likeTheme,
    themeReward,
    awardTheme,
    loadListBottom
  } from '../../service/getData'

  var gbcount = 1;
  var gbthemeId = 0;

  export default {
    name: 'app',
    data(){
      return {
        commentData: {},
        userIcon: null, //用户头像
        items: [],
        todos: [],
        listDatas: [],
        dzDatas: [],
        dsDatas: [],
        bannerOption: {
          autoplay: 3000,
          direction: 'horizontal',
          autoplayDisableOnInteraction: false,
          pagination: '.swiper-pagination',
        },
        isshow: false,
        listNumber: 1,
        isCanvasShow: true,
        allLoaded: null,
        bottomStatus: null,
        commentsCount: null,
        pageSize: 10,
        deviceId: null,
        isLikeNum: 2,
        rewardMsg: null,
        loginUserIcon: null,
      }
    },
    mounted(){
      /*var canvas = document.querySelector('canvas');
       var context = canvas.getContext("2d");
       //画布自适应宽高
       canvas.setAttribute("width", screen.availWidth);
       canvas.setAttribute("id", "canvas");
       document.body.appendChild(canvas);

       context.fillStyle="#ff5b3f"; //设置填充色
       context.fillRect(0, 0, 820, 130); //填充该颜色，以覆盖下方的背景图片
       context.globalCompositeOperation = 'destination-out';



       canvas.addEventListener('touchmove', function(event) {
       event.preventDefault(); //先去除默认的响应行为
       var touch = event.touches[0]; //获取触摸的第一个点
       context.beginPath(); //开始路径的绘制
       context.arc(touch.pageX - canvas.offsetLeft, touch.pageY - canvas.offsetTop, 20, 0, Math.PI * 2); //在所触摸处绘制圆形，半径为20像素
       context.closePath(); //结束路径绘制
       context.fillStyle="#BDC3C7"; //随意设置一种绘制颜色
       context.fill(); //填充该颜色
       var imgData = context.getImageData(0, 0, 320, 130); //获取画布中的所有像素
       var data = imgData.data; //得到像素的字节数据
       var length = data.length; //获取该数据的长度
       var transparent = 0; //设置一个变量来记录已经变为透明的像素点的数量
       for (var i = 0; i < length; i += 4) { //循环遍历每一个像素
       var alpha = data[i + 3]; //获取每个像素的透明度数值
       if (alpha < 10) //当透明度小于10时，认为它已经被擦除，transparent数值加1
       transparent++;
       }
       var percentage = transparent / (length / 4); //计算透明像素在所有像素点中所占比例
       if (percentage > 0.5) //当比例大于50%时，显示刮奖结束字样
       alert("刮奖结束！");
       })*/
    },
    created() {
      this.browserUserInfo();
      this.deviceId = getStore("_bbid");
      this.init();
      this.scrollLoad();
    },
    mounted(){
      var userIconLocal = getStore("userIcon");
      if (userIconLocal != null && userIconLocal != '') {
        this.loginUserIcon = userIconLocal;
      }

      let time = setInterval(() => {
        this.deviceId = getStore("_bbid");
        if (this.deviceId != null) {
          clearInterval(time)
          themeList(this.deviceId).then(json => {
                console.log(json);
                this.listDatas = json.data;
            });
        }
      }, 500)


      getBanner().then(res => {
        console.log(res);
        this.items = res.data;
      });
      getActivity().then(json => {
        console.log(json);
        this.todos = json.data;
      });
//            themeList(this.deviceId).then(json => {
//                console.log(json);
//                this.listDatas = json.data;
//            });
//            themeReward(this.deviceId).then(json => {
//                console.log(json);
//                this.dsDatas = json.data;
//            });
    },
    computed: {},
    methods: {
      init() {
//                var _self = this;
//                var url = "http://10.99.8.51:8080/flowcenter-activity/cms/getCmsResource?position=weibo_banner&appCode=other_browser&appVersion=1.0.0&channel=browser&deviceId=other_browser";
//                var url2 = "http://10.99.8.51:8080/flowcenter-activity/cms/getCmsResource?position=weibo_activity&appCode=other_browser&appVersion=1.0.0&channel=browser&deviceId=other_browser";
//                var url3 = "http://10.99.8.51:8080/flowcenter-activity/v9/private/" + this.deviceId + "/weibo/theme/list";
//                var url5 = "http://10.99.8.51:8080/flowcenter-activity/v9/private/" + this.deviceId + "/weibo/theme/reward";
//                fetch(url).then(function (response) {
//                    return response.json();
//                }).then(function (json) {
//                    console.log(json);
//                    _self.bannerData = json.data;
//                    _self.items = _self.bannerData;
//                });
//                fetch(url2).then(function (response) {
//                    return response.json();
//                }).then(function (json) {
//                    console.log(json);
//                    _self.todos = json.data;
//                });
//                fetch(url3).then(function (response) {
//                    return response.json();
//                }).then(function (json) {
//                    console.log(json);
//                    _self.listDatas = json.data;
//                });
//                fetch(url5).then(function (response) {
//                    return response.json();
//                }).then(function (json) {
//                    console.log(json);
//                    _self.dsDatas = json.data;
//                });
      },
      browserUserInfo(){
//                var url = "http://10.99.8.51:8080/flowcenter-activity/common/browserUserInfo";
//                var local_bbid = getStore("_bbid");
//                /*alert(local_bbid);*/
//                let validity = 30;
//                let now = new Date();
//                now.setTime(now.getTime() + validity * 24 * 60 * 60 * 1000);
//                if (local_bbid != undefined && local_bbid != "" && local_bbid != null && local_bbid !== "[object HTMLInputElement]") {
//                    document.cookie = "USER_BBID=" + local_bbid + ";expires=" + now.toGMTString();
//                } else {
//                    fetch(url).then(function (response) {
//                        return response.json();
//                    }).then(function (result) {
//                        console.log(result);
//                        if (result && result.success) {
//                            local_bbid = result.data.bbid;
//                            var _uuid = result.data.uuid;
//                            sessionStorage.setItem("_bbid", local_bbid);
//                            sessionStorage.setItem("_uuid", _uuid); // 有uuid说明绑定号码了
//                            document.cookie = "USER_UUID=" + _uuid + ";expires=" + now.toGMTString();
//                            document.cookie = "USER_BBID=" + _bbid + ";expires=" + now.toGMTString();
//                        } else if (result.code == "3003") {
//                            local_bbid = result.data.bbid;
//                            sessionStorage.setItem("_bbid", local_bbid);
//                            localStorage.setItem("_bbid", local_bbid);
//                            //alert(localStorage.getItem("_bbid"));
//                        } else {
//                            alertmsg("未获取到用户信息，请尝试刷新此页面");
//                        }
//                    });
//                }
        var local_bbid = getStore("_bbid");
        let validity = 30;
        let now = new Date();
        now.setTime(now.getTime() + validity * 24 * 60 * 60 * 1000);
        if (local_bbid != undefined && local_bbid != "" && local_bbid != null && local_bbid !== "[object HTMLInputElement]") {
          document.cookie = "USER_BBID=" + local_bbid + ";path=/;expires=" + now.toGMTString();
        }
        else {
          userInfo().then(result => {
            console.log(result);
            if (result && result.success) {
              local_bbid = result.data.bbid;
              var _uuid = result.data.uuid;
              sessionStorage.setItem("_bbid", local_bbid);
              sessionStorage.setItem("_uuid", _uuid); // 有uuid说明绑定号码了
              document.cookie = "USER_UUID=" + _uuid + ";path=/;expires=" + now.toGMTString();
              document.cookie = "USER_BBID=" + _bbid + ";path=/;expires=" + now.toGMTString();
              localStorage.setItem("_bbid", local_bbid);
            } else if (result.code == "3003") {
              local_bbid = result.data.bbid;
              sessionStorage.setItem("_bbid", local_bbid);
              localStorage.setItem("_bbid", local_bbid);
              //alert(localStorage.getItem("_bbid"));
            } else {
              alertmsg("未获取到用户信息，请尝试刷新此页面");
            }
          });
        }
      },
      listDataFun(themeid){
        this.isshow = !this.isshow
        gbthemeId = themeid
      },
      popNone(){
        this.isshow = false
      },
      awardNone2(){
        this.isshow = false
      },
      awardMinus(){
        this.listNumber--
        if (this.listNumber <= 1) {
          this.listNumber = 1
        }
        gbcount = this.listNumber

      },
      awardPlus(){
        this.listNumber++
        gbcount = this.listNumber
      },
      isHaveLike(behaviorsList){
        var isHave = false;
        if (behaviorsList != null) {
          if (!(behaviorsList.hasOwnProperty('LIKE'))) {
            isHave = true;
          }
          for (var i = 0; i < behaviorsList.length; i++) {
            if (behaviorsList[i].behaviorType == 'LIKE') {
              isHave = false;
            }
          }
        }
        return isHave;
      },
      likeData(pice, themeId, like){
        if (like == 1) {
          like = 2;
        }
        else {
          like = 1;
        }

        var _self = this;
        var url4 = "http://10.99.8.51:8080/flowcenter-activity/v9/private/" + this.deviceId + "/weibo/theme/like?themeId=" + themeId + "&like=" + like;
        console.log(url4)
        fetch(url4).then(function (response) {
          //console.log(response);
          return response.json();
        }).then(function (json) {
          console.log(json);
          if (json.code == "0000") {
            if (like == 1) {
              pice = pice + 1;
            } else {
              pice = pice - 1;
            }
            for (var i = 0; i < _self.listDatas.length; i++) {
              if (_self.listDatas[i].themeId == json.data.themeId) {
                if (_self.listDatas[i].behaviors != null) {
                  for (var n = 0; n < json.data.behaviors.length; n++) {
                    if (json.data.behaviors[n].behaviorType == 'LIKE') {
                      var isHaveLikeItem = true;
                      for (var j = 0; j < _self.listDatas[i].behaviors.length; j++) {
                        if (_self.listDatas[i].behaviors[j].behaviorType == 'LIKE') {
                          isHaveLikeItem = false;
                          _self.listDatas[i].behaviors[j].behaviorValue = json.data.behaviors[n].behaviorValue
                        }
                      }
                      if (isHaveLikeItem) {
                        _self.listDatas[i].behaviors = json.data.behaviors;
                      }
                    }
                  }
                }
                else {
                  _self.listDatas[i].behaviors = json.data.behaviors;
                }
                _self.listDatas[i].likeCount = pice;
              }
            }
          }
        });
      },
      toggle(){
        this.isCanvasShow = !this.isCanvasShow;
      },
      isHaveReward(behaviorsList){
        var isHave = false;
        if (behaviorsList != null) {
          if (!(behaviorsList.hasOwnProperty('REWARD'))) {
            isHave = true;
          }
          for (var i = 0; i < behaviorsList.length; i++) {
            if (behaviorsList[i].behaviorType == 'REWARD') {
              isHave = false;
            }
          }
        }
        return isHave;
      },
      HaveReward(behaviorsList){
        var isHave = false;
        if (behaviorsList != null) {
          for (var i = 0; i < behaviorsList.length; i++) {
            if (behaviorsList[i].behaviorType == 'REWARD') {
              isHave = true;
            }
          }
        }
        return isHave;
      },
      awardGo(){
        var _self = this;
        var commentId = _self.commentId;
        awardTheme(this.deviceId, gbthemeId, gbcount)
          .then(json => {
            console.log(json);
            if (json.code == '0000') {
              _self.isshow = false;
              for (var i = 0; i < _self.listDatas.length; i++) {
                if (_self.listDatas[i].themeId == gbthemeId) {
                  _self.listDatas[i].behaviors = json.data.behaviors;
                  _self.listDatas[i].rewardCount = gbcount + _self.listDatas[i].rewardCount;
                }
              }
            }else if(json.code == '3003'){
                this.$router.push('/login_reward');
            }
            else {
              this.rewardMsg = json.msg;
            }
          });
      },
      countTime(item){
        let curentTime = new Date()
        let showTime = new Date(item);
        let day = showTime.getDate();
        let month = showTime.getMonth() + 1;
        let year = showTime.getFullYear();
        let hour = showTime.getHours();
        let min = showTime.getMinutes();

        if (month < 10) {
          month = '0' + month;
        }
        if (day < 10) {
          day = '0' + day;
        }
        if (hour < 10) {
          hour = '0' + hour;
        }
        if (min < 10) {
          min = '0' + min;
        }

        let lastShowTime = '';

        if (curentTime.getFullYear() - year > 0) {
          lastShowTime += year + '-';
        }
        if (curentTime.getDate() - day > 0) {
          lastShowTime += month + '-' + day + ' ';
        }
        lastShowTime += hour + ':' + min;

        return lastShowTime;
      },
      handleBottomChange(status){
        this.bottomStatus = status;
      },
      loadBottom() {
        this.pageSize += 10;
        loadListBottom(this.deviceId, 1, this.pageSize).then(json => {
          console.log(json);
          setTimeout(() => {
            if (this.commentsCount < this.pageSize) {
              this.allLoaded = true;// 若数据已全部获取完毕
            } else {
              this.allLoaded = false;
            }
            this.listDatas = json.data;
            this.$refs.loadmore.onBottomLoaded();
          }, 1500);
        });
      },
      scrollLoad(){
        let _this = this;
        window.onscroll = function () {
          var htmlHeight = document.body.scrollHeight || document.documentElement.scrollHeight;
          var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
          var innerHeight = window.innerHeight;
          if (scrollTop + innerHeight == htmlHeight && innerHeight < htmlHeight) {
            _this.pageSize += 10;
            loadListBottom(_this.deviceId, 1, _this.pageSize).then(json => {
              console.log(_this.pageSize);
              console.log(json);
              _this.listDatas = json.data;
            });
          }
        };
      }
    },
    components: {
      swiper,
      swiperSlide,
      Loadmore
    },

  }
</script>

<style>
  body{
    background-color: #f2f2f2;
  }

  .banner {
    background: #f2f2f2;
  }

  .img2 {
    width: 100%;
    display: block;
  }

  .activity-btn {
    display: -webkit-flex;
    display: flex;
    background: #fff;
    padding: 0.2rem 0;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    border-bottom: 1px solid #d3d3d3;
  }

  .activity-btn a {
    width: 30%;
    padding: 0.5rem 1rem;
    text-align: center;
    border-radius: 0.3rem;
    margin: 0.6rem 0.5rem;
  }

  .activity-btn a:nth-child(1) {
    background: #27ccbb;
  }

  .activity-btn a:nth-child(2) {
    background: #ffc34b;
    margin: 0.6rem 0;
  }

  .activity-btn a:nth-child(3) {
    background: #8c83ff;
  }

  .activity-btn a img {
    width: 35%;
    display: block;
    margin: 0 auto;
  }

  .activity-btn a p {
    color: #fff;
    text-align: center;
    font-size: 0.8rem;
  }

  /*个人头像*/
  .headerFix {
    position: fixed;
    top: 50%;
    right: 2%;
    z-index: 9;
    width: 3rem;
    height: 3rem;
    border-radius: 9999px;
    overflow: hidden;
  }

  .headerFix img {
    width: 100%;
  }

  .paging .swiper-pagination-bullet {
    width: 1.4rem;
    border-radius: 0;
    height: 0.1rem;
    background: rgba(1, 1, 1, .8);
  }

  .paging .swiper-pagination-bullet-active {
    background: #eee;
    opacity: 1;
  }

  .con {
    border-top: 1px solid #d3d3d3;
    border-bottom: 1px solid #d3d3d3;
    background: #fff;
    padding: 0.8rem;
  }

  .con-top a {
    display: inline-block;
    width: 2.7rem;
    height: 2.7rem;
    border-radius: 50%;
    vertical-align: middle;
    overflow: hidden;
  }

  .con-top a img {
    width: 100%;
    height: 100%;
  }

  .con-top-p {
    display: inline-block;
    width: 80%;
    padding-left: 0.4rem;
    vertical-align: middle;
  }

  .con-top-p1 {
    color: #536792;
    font-weight: bold;
    font-size: 0.85rem;
    padding-bottom: 0.2rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
    vertical-align: middle;
  }

  .con-top-p2 {
    color: #afafaf;
    font-size: 0.7rem;
  }

  .con-tit {
    font-size: 0.8rem;
    padding: 0.5rem 0;
  }

  .con-tit .con-tit-span1 {
    word-break: break-all;
  }

  .con-tit-span2 {
    color: #5a6d96;
  }

  .con-img-1 img {
    width: 100%
  }

  .con-img-2 {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    position: relative;
  }

  .con-img-a {
    width: 30%;
  }

  .con-img-a img {
    width: 100%;
    display: block;
  }

  .con-img-num {
    position: absolute;
    z-index: 2;
    right: 0;
    bottom: 0;
    background: rgba(1, 1, 1, .7);
    color: #fff;
    padding: 0.2rem 0.6rem;
  }

  .con-talk {
    display: -webkit-flex;
    display: flex;
    justify-content: space-between;
    border-bottom: 1px solid #d3d3d3;
    background: #fff;
    padding: 0.6rem 0;
  }

  .con-talk span {
    width: 33.3333%;
    text-align: center;
  }

  .con-talk span img {
    display: inline-block;
    vertical-align: middle;
    width: 1rem;
  }

  .con-talk span i {
    vertical-align: middle;
    font-style: normal;
    font-size: 0.8rem;
    padding-left: 0.5rem;
  }

  .con-talk span:nth-of-type(2) {
    position: relative;
  }

  .con-talk span:nth-of-type(2):before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    width: 1px;
    height: 100%;
    background: #e5e5e5;
  }

  .con-talk span:nth-of-type(2):after {
    content: '';
    position: absolute;
    top: 0;
    right: 0;
    width: 1px;
    height: 100%;
    background: #e5e5e5;
  }

  .message-talk-top {
    overflow: hidden;
    padding: 0.9rem 0.8rem 0 0.8rem;
    background: #fff;
  }

  .message-top-header {
    float: left;
    width: 2.8rem;
    height: 2.8rem;
    border-radius: 50%;
    overflow: hidden;
  }

  .message-top-header img {
    width: 100%;
    position: relative;
  }

  .message-top-name {
    float: left;
    padding-left: 0.4rem;
    width: 38%;
  }

  .message-top-name-p1 {
    color: #536792;
    font-size: 0.9rem;
    padding-bottom: 0.3rem;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }

  .message-top-name-p2 {
    color: #afafaf;
    font-size: 0.85rem;
  }

  .message-top-shop {
    text-align: right;
    padding-top: 0.5rem;
  }

  .message-top-shop a {
    display: inline-block;
    margin-left: 1rem;
  }

  .message-top-shop a:first-child {
    margin-left: 0;
  }

  .message-top-shop a img {
    width: 0.9rem;
    display: inline-block;
    vertical-align: middle;
  }

  .message-top-shop a span {
    vertical-align: middle;
    color: #838383;
    padding-left: 0.3rem;
  }

  .message-talk-tit {
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem 0.8rem 4rem;
    position: relative;
  }

  .message-talk-tit span {
    color: #536792;
  }

  .message-talk-tit:before {
    content: '';
    position: absolute;
    height: 1px;
    background: #e5e5e5;
    width: 100%;
    bottom: 0;
    right: 0;
  }

  .comment {
    margin-bottom: 0.5rem;
  }

  .message-talk-reply {
    background: #fff;
    font-size: 0.9rem;
    padding: 0.3rem 0.8rem 0.8rem 4rem;
    border-bottom: 1px solid #e5e5e5;
  }

  .message-talk-reply b {
    font-weight: 500;
    color: #536792;
  }

  /*打赏弹窗*/
  .award-pop {
    position: fixed;
    width: 100%;
    height: 100%;
    z-index: 99;
    background: rgba(1, 1, 1, .5);
    top: 0;
    left: 0;
    right: 0;
    margin: auto;
    max-width: 720px;
  }

  .award-tc {
    background: #fff;
    border-radius: 6px;
    position: fixed;
    padding: 0.8rem;
    width: 70%;
    top: 25%;
    max-width: 720px;
    z-index: 100;
    right: 0;
    left: 0;
    margin: auto;
    font-size: 0.8rem;
  }

  .award-1 {
    position: absolute;
    top: -1.5rem;
    left: 0;
    right: 0;
    margin: auto;
    width: 3rem;
  }

  .award-1 img {
    width: 100%;
  }

  .award-2 {
    position: absolute;
    top: 0;
    right: 0;
    width: 1.5rem;
    padding: 0.4rem;
  }

  .award-2 img {
    width: 100%;
  }

  .award-3 {
    padding: 1.2rem 0 0.5rem 0;
    font-size: 0.9rem;
    text-align: center;
  }

  .award-4 {
    padding: 0 0.2rem 0.8rem 0.2rem;
    text-align: center;
    color: #9f9f9f;
  }

  .award-5 {
    overflow: hidden;
    margin-bottom: 1rem;
  }

  .award-minus {
    float: left;
    width: 25%;
    text-align: center;
    border: 1px solid #e5e5e5;
    line-height: 2.2rem;
    border-radius: 10rem 0 0 10rem;
  }

  .award-minus img {
    display: inline-block;
    vertical-align: middle;
    width: 20px;
  }

  .award-money {
    float: left;
    width: 39%;
    text-align: center;
    border: 1px solid #e5e5e5;
    line-height: 2.2rem;
    font-size: 0.9rem;
    color: #ff1400;
    margin: 0 4%;
  }

  .award-plus {
    float: left;
    width: 25%;
    text-align: center;
    border: 1px solid #e5e5e5;
    line-height: 2.2rem;
    border-radius: 0 10rem 10rem 0;
  }

  .award-plus img {
    display: inline-block;
    vertical-align: middle;
    width: 18px;
  }

  .award-6 {
    background: #1cbafb;
    color: #fff;
    margin: 0 1rem 0.5rem 1rem;
    border-radius: 30rem;
    text-align: center;
    padding: 0.8rem 0;
    font-size: 0.9rem;
  }

  .award-6:active {
    background: #178ebe;
  }

  .award-7 {
    text-align: center;
    color: #9f9f9f;
  }

  .award-7 span {
    color: #1cbafb;
  }

  canvas {
    max-width: 720px;
  }

  .award {
    margin: 0 auto;
    text-align: center;
    position: relative;
  }

  .blowCardDsec-img {
    margin: auto;
    width: 100%;
    position: absolute;
    top: 0;
    left: 0;
    height: 130px;
  }

  .blowCardBtnDiv {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    text-align: center;
    padding-top: 1.2rem;
  }

  .descFonts {
    color: #fc4f2c;
    font-size: 1rem;
    font-weight: bold;
    padding-bottom: 0.8rem;
  }

  .blowCardBtn {
    background: #fc4f2c;
    border: 0;
    color: #fff;
    font-size: 0.9rem;
    padding: 0.4rem 0.8rem;
    border-radius: 4px;
  }

  .con-show-img {
    height: 6rem;
    overflow: hidden;
  }

  .con-show-img img {
    min-height: 100%;
    object-fit: cover;
  }

  .page-loadmore .mint-spinner {
    display: inline-block;
    vertical-align: middle;
  }

  .page-loadmore-desc {
    text-align: center;
    color: #666;
    padding-bottom: 5px;
  }

  .page-loadmore-desc:last-of-type {
    border-bottom: solid 1px #eee;
  }

  .page-loadmore-listitem {
    height: 50px;
    line-height: 50px;
    border-bottom: solid 1px #eee;
    text-align: center;
  }

  .page-loadmore-listitem:first-child {
    border-top: solid 1px #eee;
  }

  .page-loadmore-wrapper {
    overflow: scroll;
  }

  .mint-loadmore-bottom span {
    display: inline-block;
    -webkit-transition: .2s linear;
    transition: .2s linear;
    vertical-align: middle
  }

  .mint-loadmore-bottom span.is-rotate {
    -webkit-transform: rotate(180deg);
    transform: rotate(180deg);
  }

  /*.img2{position: absolute;top:0;left:0;z-index:1;}*/

</style>
